<style lang = "scss" scoped>
#cmain{
    .cmain-content{
        height: auto;
        border-radius:10px;
        background:#fff;
        box-shadow:0px 0px 15px 0px rgba(207,207,207,1);
        padding:0px 25px;
        padding-bottom:20px;
        .cmain-header{
            height: 54px;
            line-height:54px;
            border-bottom:1px solid rgb(220,223,230);
            p{
                color:#666;
                font-size:16px;
                font-weight:800;
            }
        }
        .cmain-box{
            margin-top:25px;
            border:1px solid rgb(220,223,230);
            padding-bottom:20px;
            .camin-box-title{
                text-align:center;
                width:100%;
                height: 40px;
                line-height:40px;
                font-size:14px;
                background:#EEF1F6;
                color:#6C7695;
                margin-bottom:20px;
            }
            .relation{
                font-weight: 800;
            }
        }
    } 
}
</style>
<template>
    <div id="cmain">
        <div class="cmain-content">
            <div class="cmain-header">
                <p>亲属信息</p>
            </div>
            <div class="cmain-box">
                <div class="camin-box-title">请输入家庭中兄弟姐妹，叔叔阿姨的数量。</div>
                <el-row>
                    <el-col :span="8">&nbsp;</el-col>
                    <el-col :span="8">
                        <el-form ref="familyForm" label-position="top" label-width="80px" :rules="rules" :model="formData">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="sex">
                                <el-select  v-model="formData.sex">
                                    <el-option label="男" value="male"></el-option>
                                    <el-option label="女" value="female"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-row>
                                <p class="relation">父亲的亲属</p>
                                <el-col :span="9">
                                    <el-form-item label="父亲的兄弟">
                                        <el-input min="0" type="number" v-model="formData.paternalUncle"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">&nbsp;</el-col>
                                <el-col :span="9">
                                    <el-form-item label="父亲的姐妹">
                                        <el-input min="0" type="number" v-model="formData.paternalAunt"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <p class="relation">母亲的亲属</p>
                                <el-col :span="9">
                                    <el-form-item label="母亲的兄弟">
                                        <el-input min="0" type="number" v-model="formData.maternalUncle"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">&nbsp;</el-col>
                                <el-col :span="9">
                                    <el-form-item label="母亲的姐妹">
                                        <el-input min="0" type="number" v-model="formData.maternalAunt"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <p class="relation">直系亲属</p>
                                <el-col :span="9">
                                    <el-form-item label="兄弟">
                                        <el-input min="0" type="number" v-model="formData.brother"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">&nbsp;</el-col>
                                <el-col :span="9">
                                    <el-form-item label="姐妹">
                                        <el-input min="0" type="number" v-model="formData.sister"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="9">
                                    <el-form-item label="儿子">
                                        <el-input min="0" type="number" v-model="formData.son"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">&nbsp;</el-col>
                                <el-col :span="9">
                                    <el-form-item label="女儿">
                                        <el-input min="0" type="number" v-model="formData.daughter"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item>
                                <el-button @click="goBack" size="small">返回</el-button>
                                <el-button @click="goOn" type="primary" size="small">继续</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8">&nbsp;</el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"draw-index",
    data(){
        return {
            familyTreeId:"",
            patientId:"",
            telNum:"",
            curentAge:"",
            formData:{
                name:"",
                sex:"",
                paternalUncle:0,
                paternalAunt:0,
                maternalUncle:0,
                maternalAunt:0,
                brother:0,
                sister:0,
                son:0,
                daughter:0
            },
            rules:{
                name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                sex: [{ required: true, message: '性别不能为空', trigger: 'change' }]
            }
        }
    },
    methods:{
        //返回
        goBack(){
            this.$router.go(-1);
        },
        //继续
        goOn(){
            this.$refs.familyForm.validate((valid) => {
                if(valid){
                    this.getFamilyData();
                    // sessionStorage.setItem("drawState",'add');
                    // this.$router.push("/drawMain");
                    var a = document.createElement("a");
                    a.setAttribute("target", "_blank");
                    a.setAttribute("href", "/drawMain?familyTreeId="+this.familyTreeId+"&drawState=add&patientId="+this.patientId+"");
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                }
            })   
        },
        //构建家系图数据结构
        getFamilyData(){
            //设置先证者信息
            this.setProbandData();
            //设置家族其他信息
            this.setOtherData();
        },
        //设置先证者信息
        setProbandData(){
            var probandData = this.getPersonInfo(this.formData.name, 0, 1, 2, this.formData.sex);
            if(this.formData.sex == "male"){
                probandData.gender = "M";
            }else if(this.formData.sex == "female"){
                probandData.gender = "F";
            }else{
                 probandData.gender = "";
            }
            probandData.telNum = this.telNum;
            probandData.curentAge =this.curentAge;
            probandData.dateOfAdd = this.getCurrentDate();
            sessionStorage.setItem("probandData",JSON.stringify(probandData));
        },
        //设置家族其他信息
        setOtherData(){
            if(this.formData.brother == 0 && this.formData.daughter == 0 && this.formData.maternalAunt == 0 && this.formData.maternalUncle == 0 && this.formData.paternalAunt == 0 && this.formData.paternalUncle == 0 && this.formData.sister == 0 && this.formData.son == 0) {
                var fmilyList = [];
                var data = JSON.parse(sessionStorage.getItem("probandData"));
                fmilyList.push(data);
                var external_id = this.familyTreeId;
                fmilyList = fmilyList.concat(this.getBasFamily(external_id));
                sessionStorage.setItem('pedigreeData', JSON.stringify(fmilyList));
                sessionStorage.setItem('familyJSONData', JSON.stringify(fmilyList));
                return;
            }
            var pedigreeData = [];
            var index = 7;
            var external_id = this.familyTreeId;

            pedigreeData = this.getBasFamily(external_id);
            //兄弟
            if(this.formData.brother > 0) {
                for(var i = 0; i < this.formData.brother; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 1, 2, "male", external_id));
                    index++;
                }
            }
            //姐妹
            if(this.formData.sister > 0) {
                for(var i = 0; i < this.formData.sister; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 1, 2, "female", external_id));
                    index++;
                }
            }
            //儿女
            if(this.formData.son > 0 || this.formData.daughter > 0) {
                var proband = JSON.parse(sessionStorage.getItem('probandData'));
                pedigreeData.push(proband); //先证者
                var father_id;
                var mother_id;
                if(JSON.parse(sessionStorage.getItem('probandData')).gender == "M") {
                    mother_id = index;
                    father_id = 0;
                    index++;
                    pedigreeData.push(this.getPersonInfo("", mother_id, null, null, "female", external_id));
                } else {
                    mother_id = 0;
                    father_id = index;
                    index++;
                    pedigreeData.push(this.getPersonInfo("", father_id, null, null, "male", external_id));
                }

                if(this.formData.son > 0) {
                    for(var i = 0; i < this.formData.son; i++) {
                        pedigreeData.push(this.getPersonInfo("", index, father_id, mother_id, "male", external_id));
                        index++;
                    }
                }
                if(this.formData.daughter > 0) {
                    for(var i = 0; i < this.formData.daughter; i++) {
                        pedigreeData.push(this.getPersonInfo("", index, father_id, mother_id, "female", external_id));
                        index++;
                    }
                }
            } else {
                pedigreeData.push(JSON.parse(sessionStorage.getItem('probandData'))); //先证者
            }
            //叔叔
            if(this.formData.paternalUncle > 0) {
                for(var i = 0; i < this.formData.paternalUncle; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 3, 4, "male", external_id));
                    index++;
                }
            }
            //姑姑
            if(this.formData.paternalAunt > 0) {
                for(var i = 0; i < this.formData.paternalAunt; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 3, 4, "female", external_id));
                    index++;
                }
            }
            //舅舅
            if(this.formData.maternalUncle > 0) {
                for(var i = 0; i < this.formData.maternalUncle; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 5, 6, "male", external_id));
                    index++;
                }
            }
            //阿姨
            if(this.formData.maternalAunt > 0) {
                for(var i = 0; i < this.formData.maternalAunt; i++) {
                    pedigreeData.push(this.getPersonInfo("", index, 5, 6, "female", external_id));
                    index++;
                }
            }
            pedigreeData.sort(this.asc);

            sessionStorage.setItem('pedigreeData', JSON.stringify(pedigreeData));
            sessionStorage.setItem('familyJSONData', JSON.stringify(pedigreeData));
        },
        getBasFamily(external_id){
            var pedigreeData = [];
            pedigreeData.push(this.getPersonInfo("", 1, 3, 4, "male", external_id));
            pedigreeData.push(this.getPersonInfo("", 2, 5, 6, "female", external_id));
            pedigreeData.push(this.getPersonInfo("", 3, null, null, "male", external_id));
            pedigreeData.push(this.getPersonInfo("", 4, null, null, "female", external_id));
            pedigreeData.push(this.getPersonInfo("", 5, null, null, "male", external_id));
            pedigreeData.push(this.getPersonInfo("", 6, null, null, "female", external_id));
            return pedigreeData;
        },
        //获取家庭成员详细信息
        getPersonInfo(person_name, person_id, father_id, mother_id, sex, external_id){
            var _personProperty = {
                "id": person_id, //人物id
                "father": father_id, //父亲id
                "mother": mother_id, //母亲id
                "sex": sex, //性别 M/F
                "firstName": person_name, //人名
                "externalID": external_id, //家系ID
                "dateOfAdd":this.getCurrentDate(),
                'precursor':person_id==0?1:0,
	        };
	        return _personProperty;
        },
        //排序
        asc(x,y){
            return(x["id"] > y["id"]) ? 1 : -1
        },
        //获取当前时间
        getCurrentDate(){
            var d = new Date();
            var yy = d.getFullYear();
            var mm = d.getMonth()+1>9?d.getMonth()+1 : '0'+(Number(d.getMonth())+1);
            var dd = d.getDate()>9 ? d.getDate() : '0'+Number(d.getDate()); 
            return yy+'-'+mm+'-'+dd;
        }
    },
    created() {
        this.familyTreeId = M.url().familyTreeId ? M.url().familyTreeId : this.$store.state.familyTreeId;
        this.patientId = M.url().patientId ? M.url().patientId : "";
        this.curentAge = this.$store.state.curentAge ? this.$store.state.curentAge : "";
        this.telNum = this.$store.state.telNum ? this.$store.state.telNum : "";
        this.formData.name = M.url().hasOwnProperty("patientName") ? decodeURI(decodeURI(M.url().patientName)) : this.$store.state.familyName;
        var sex = M.url().hasOwnProperty("patientSex") ? decodeURI(decodeURI(M.url().patientSex)) : this.$store.state.familySex;
        if(sex == "男"){
            this.formData.sex = "male";
        }else if(sex == "女"){
            this.formData.sex = "female";
        };
    },
}
</script>
<style lang="scss" scoped>
.el-form {
        .el-form-item{
            margin-bottom:15px !important;
            .el-form-item__label{
                padding:0 !important;
            }
        }
    } 
</style>

  